<script setup lang="ts">
import {
	ClearOutlined,DownOutlined,
} from '@ant-design/icons-vue';
//import useAudioStream from "@/hooks/useAudioStream.ts";
/* props */
const props = defineProps({
	clearHistory: { type:Boolean, default: false, required:false}, //是否显示清空历史
	hidden: { type:Boolean, default: false, required:false},
})

/* emits */
const emit = defineEmits(['onClearHistory']);

/* data */
const refScreen= ref()
const refBack2Bottom =ref()
const observerElement = ref();
let observer:any=null;
const inPush = inject('inPush',ref(false)); //是否正处于信息推流中？

/* methods */
//滚动到顶部
const scrollToTop = () =>
	observerElement.value.scrollIntoView({ behavior: "smooth", block: "start" });
//滚动到底部
const scrollToBottom = (auto?:boolean) =>
	observerElement.value.scrollIntoView({ behavior: auto?"auto":"smooth", block: "end" });

const confirmClear= ()=>{
	//console.log('clear history yes')
	emit('onClearHistory');
}

//下载附件
const downloadFile = (url:string, fileName:string)=>{
	//console.log(fileName);
	const a = document.createElement('a');
	a.href = url
	a.download = fileName;
	document.body.appendChild(a);
	a.click();
	document.body.removeChild(a);
	window.URL.revokeObjectURL(a.href);
}

onMounted(()=>{
	nextTick(()=>{
		const handleIntersect = (entries:any[]) => {
			entries.forEach((entry:any) => {
				if (entry.isIntersecting) {
					// 元素与底部还有60px时执行的操作
					refBack2Bottom.value.style.opacity=0;
					refBack2Bottom.value.style.pointerEvents='none';
				} else {
					// 如果不需要在元素完全离开视线时执行操作，可以注释或删除此代码块
					if(refBack2Bottom.value){
						refBack2Bottom.value.style.opacity=1;
						refBack2Bottom.value.style.pointerEvents='auto';
					}
				}
			});
		};
		observer = new IntersectionObserver(handleIntersect, {
			root: refScreen.value, // 使用refTerminal作为根元素
			rootMargin: '0px 0px 60px 0px', // 底部边缘与目标元素的距离为100px时触发回调
			threshold: 1.0 // 表示完全进入或离开视口时触发（此处设置为1.0是因为我们使用了rootMargin）
		});
		if (observerElement.value) {
			observer?.observe(observerElement.value);
		}
	})
})
onUnmounted(()=>{
	if (observerElement.value) {
		observer?.unobserve(observerElement.value);
	}
})

defineExpose({

	scrollToTop,scrollToBottom,downloadFile,
})
</script>

<template>
	<div v-show="!hidden" class="terminal-wrapper" ref="refScreen">
		<slot></slot>
		<div class="my-divider" ref="observerElement">
			<template v-if="props.clearHistory">
				<a-popconfirm title="你确定要清除本对话的历史，并开启新话题吗?" ok-text="确定" cancel-text="取消" @confirm="confirmClear" >
					<div v-show="!inPush" class="inner-text"><ClearOutlined style="margin-right:5px"/> 清除历史记录</div>
				</a-popconfirm>
			</template>
			<div v-else class="inner-text"> END </div>
		</div>
	</div>
	<div v-show="!hidden" style="position: relative;height:0;">
		<div class="scroll-arrow-bottom" @click="scrollToBottom()" ref="refBack2Bottom"><DownOutlined /></div>
	</div>
</template>

<style scoped lang="scss">
.terminal-wrapper{
	flex:1; display:flex; flex-direction:column; overflow-y:auto; overflow-x:hidden; gap:14px; padding:24px 16px 0;
	position:relative;
}
.my-divider{
	font-size:14px;color:var(--font-secondary-color);  position:relative;
	display: flex; align-items: center; margin-top:auto;
	&::before, &::after { content: ""; width: 50%; border-top: 1px solid var(--header-border-bottom-color);margin:0 1em}
	.inner-text{
		display: flex; align-items: center; flex:1; white-space:nowrap;cursor: pointer; margin:10px 0;
		&:hover{color:var(--font-main-color);}

	}

}
.scroll-arrow-bottom{
	position: absolute; top:-32px; right:20px;
	width: 32px; height: 32px; padding: 0; display: flex; align-items: center; justify-content: center; background: var(--bg-panel-color);
	border-radius: 100%; box-shadow: 0 2px 10px 0 rgba(0, 0, 0, 0.2); transition: 0.3s; overflow: hidden; z-index: 2; cursor: pointer;
	opacity: 0; pointer-events: none; border:1px solid var(--border-color);
}
.preview-body{
	display: flex; justify-content: center; width:100%;
	img{margin:0;padding:0;display:block;}
}
:deep(pre:has(code)){
	padding:10px; border-radius:8px;
    color:var(--border-color);
	background-color: var(--font-base-color);
}

//:deep(.ant-divider-horizontal.ant-divider-with-text::before){ transform:none;border-color:#e7e7e7 }
//:deep(.ant-divider-horizontal.ant-divider-with-text::after){ transform:none;border-color:#e7e7e7 }
</style>